<template>
  <div>
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 1px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px">数据列表</span>
      <!--工具条-->
      <div class="toolbar">
        <el-button color="#1ABC9C" size="small" @click="saveOrUpdate()">
          <div style="color: #F3F3F3;">新增</div>
        </el-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column type="selection" width="100" header-algin="center" align="center" />
      <el-table-column prop="code" label="编号" header-align="center" align="center" />
      <el-table-column prop="name" label="结算方式" header-align="center" align="center" />
      <el-table-column prop="createTime" label="创建日期" header-align="center" align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <span class="btn" @click="saveOrUpdate(row)">编辑</span>
          <span class="btn" @click="del(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!--  添加或修改对话框  -->
    <SaveOrUpdate :visible="isshow" @close="isshow = false" @refresh="initData" ref="saveUpdate"></SaveOrUpdate>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { queryDict,delDict } from "@/api/settings/dictionary";
import SaveOrUpdate from './SaveOrUpdate.vue';
import { ElMessage, ElMessageBox } from "element-plus";

const tableData = ref([])
const code = ref("payway")

//添加用户
const isshow = ref(false)

//同名引用
const saveUpdate = ref(null)

async function initData() {
  let res = await queryDict(code.value)
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

//保存或修改
function saveOrUpdate(row) {
  isshow.value = true;
  saveUpdate.value.init(row)
}

//删除企业
async function del(row) {
  let data = {
    "id": row.id
  }
  ElMessageBox.confirm(
    '确认删除该结算方式吗',
    '结算方式删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await delDict(data)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}

onMounted(() => {
  initData();
})
</script>
<style scoped>
.btn {
  color: #1ABC9C;
  margin-left: 5px;
  cursor: pointer;
}
.toolbar {
  float: right;
}
</style>